<template>
  <div
    class="toptit_wrap"
    :style="{'background':titleBg,'height':titleBg}"
    :class="{'fixed':this.fixedTitle,'hidden':this.hidden}"
  >
    <div class="back" @click="routerback">
      <i class="iconfont iconfanhui"></i>
    </div>
    <h1 class="title" v-html="title"></h1>
    <div class="avatar-right">
      <slot name="avatar" class="avatar"></slot>
    </div>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
export default {
  props: {
    title: {
      type: String,
      defualt: "标题"
    },
    isbackIndex: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      titleBg: `rgba(0, 0, 0, 0.1)`,
      fixedTitle: false,
      hidden: false
    };
  },
  mounted() {
    // 监听来自其他组件的值：
    PubSub.subscribe("titleDistance", (msg, distance) => {
      this.titleBg = `rgba(34,34,34,${distance})`;
      console.log(distance);
    });
    PubSub.subscribe("fixtitle", (msg, val) => {
      this.fixedTitle = val;
    });
    PubSub.subscribe("removeTitle", (msg, val) => {
      this.hidden = true;
    });
  },
  methods: {
    routerback() {
      if (!this.isbackIndex) {
        this.$router.back();
      } else {
        this.$router.push({
          name: "recommend"
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
.toptit_wrap {
  background: transparent;
  .tf3;
  &.fixed {
    height: 45px;
    background: #222;
    z-index: 666;
    position: relative;
    box-shadow: 0 0 12px rgba(34, 34, 34, 0.6);
  }
  &.hidden {
    display: none;
  }
}
.back {
  position: absolute;
  top: 0;
  left: 6px;
  z-index: 50;
  .iconfanhui {
    display: block;
    padding: 10px;
    font-size: @font-size-large-x;
    color: @color-theme;
    font-size: 24px;
  }
}
.avatar-right {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 20px;
  top: 0;
  z-index: 50;
}
.title {
  position: absolute;
  top: 0;
  left: 10%;
  z-index: 40;
  width: 80%;
  .sl;
  text-align: center;
  line-height: 40px;
  font-size: @font-size-large;
  color: @color-text;
}
</style>